<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<style>
.layui-layer.layui-layer-page{
	background:#f3f3f4;
}
</style>
<body class="gray-bg">
	
	<div class="container-div ui-layout-center">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="user-form">
					<input type="hidden" id="deptId" name="deptId">
	                <input type="hidden" id="parentId" name="parentId">
					<div class="select-list">
						<ul>
							<li>
								计划名称：<input type="text" name="planName"/>
							</li>
							<li>
								流程名称：<input type="text" name="processName"/>
							</li>
							<li class="select-time">
								<label>报名时间： </label>
								<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
								<span>-</span>
								<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
							</li>
							<li>
								<a class="btn btn-success btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-success btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
	        
	        <div class="col-sm-12 select-table table-striped">
			    <table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
		</div>
	</div>
	<div th:include="include :: footer"></div>
	<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
	<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script> 
	<script th:inline="javascript">
		var prefix = ctx + "personal/todo";
		var datas = [[${@dict.getType('per_sign_result')}]];

		$(function() {
			$('body').layout({ west__size: 185 });
			queryApplyList();
		});

		function queryApplyList() {
		    var options = {
		        url: prefix + "/list",
		        // sortName: "perSignUpdateTime",
		        // sortOrder: "desc",
		        modalName: "我的审批",
		        search: false,
		        showExport: false,
		        columns: [{
		            checkbox: true
		        },
		        {
		            field: 'recordId',
		            title: '记录ID',
					visible: false
		        },
				{
					field: 'planId',
					title: '计划ID',
					visible: false
				},
		        {
		            field: 'planName',
		            title: '计划名称'
		        },
				{
					field: 'userId',
					title: '申请人工号'
				},
				{
					field: 'userName',
					title: '申请人'
				},
		        {
		            field: 'processId',
		            title: '流程ID',
					visible: false
		        },
				{
					field: 'processName',
					title: '流程名称',
				},
				{
					field: 'taskId',
					title: '当前审批ID',
					visible: false
				},
				{
					field: 'taskName',
					title: '当前审批名称'
				},
				{
					field: 'taskStartTime',
					title: '审批提交时间'
				},
				{
					field: 'applyFile',
					title: '审批提交文件',
					visible: false
				},
				{
					field: 'currentStatus',
					title: '流程状态'
				},
				{
					field: 'flowStartTime',
					title: '流程开始时间'
				},
				{
					field: 'flowEndTime',
					title: '流程结束时间'
				},
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		                var actions = [];
		                actions.push('<a class="btn btn-success btn-xs " style="margin:3px;" href="#" onclick="getApprove(\'' + row.processId+','+row.currentStatus+','+row.taskId + '\')"><i class="fa fa-edit"></i>审批</a> ');
						actions.push('<a class="btn btn-success btn-xs " style="margin:3px;" href="#" onclick="getProcessDiagram(\'' + row.processId + '\')"><i class="fa fa-edit"></i>进展查看</a> ');
		                actions.push('<a class="btn btn-success btn-xs " style="margin:3px;" href="#" onclick="$.operate.downloadFile(\'' + row.applyFile + '\')"><i class="fa fa-edit"></i>下载报名文件</a> ');
		                return actions.join('');
		            }
		        }]
		    };
		    $.table.init(options);
		}
		function getProcessDiagram(processId){
			var url = ctx + "flow/mgr/processDiagram?processId="+processId;
			$.modal.open("进展详情", url, '800','300');
		}
		
		//审批页面
		function getApprove(processId,currentStatus,taskId) {

			sessionStorage.setItem("currentStatus",processId.split(",")[1]);
			sessionStorage.setItem("processId",processId.split(",")[0]);
			sessionStorage.setItem("taskId",processId.split(",")[2]);

			var url = "/personal/todo/check";
			var _width = "800";
			var _height = ($(window).height() - 50);

			if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
				_width = 'auto';
				_height = 'auto';
			}

			  layer.open({
            		type: 2,
            		area: [_width + 'px', _height + 'px'],
            		fix: false,
            		//不固定
            		maxmin: true,
            		shade: 0.3,
            		title: "我的审批",
            		content: url,
            		//btn: [''],
            	    // 弹层外区域关闭
            		shadeClose: true,
            		yes: function(index,layero) {
            			
            			var iframeWin = layero.find('iframe')[0];
            	        iframeWin.contentWindow.submitHandler();
            	    },
            	    cancel: function(index) {
            	        return true;
            	    }
            });
		}


	</script>
</body>
</html>